<!--课程分类设置-->
<template>
  <div class="assessment-container" style="width:100%;margin:0 auto">
     <div>
      <!-- :disabled="topTypeData.length == 4 " -->
      <!-- <el-button type="warning" icon="el-icon-circle-plus-outline" @click="addFirstType">
        新增课程分类名称
      </el-button> -->
      <div
        class="cjrc-button"
        @click="addFirstType"
      >
        <img src="@/assets/assessment/iconaddd.png" alt="" />
        <span style="margin-left: 10px;">新增课程分类名称</span>
      </div>
    </div>
    <div class="plan-entry-table-container" style="margin-top:15px">
      <el-table
        :data="tableData"
        style="width: 100%"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
        ref="courseTableList"
        :row-key="getIdArr"
        :expand-row-keys="idArr"
        expand-change="handleExpandChange"
        :tree-props="{ children: 'childCategory', hasChildren: 'hasChildren' }"
      >
        <el-table-column label="课程分类名称" align="left">
          <template slot-scope="{ row, $index }">
            <span v-if="!row.setName">{{ row.flmc }}</span>
            <el-input
              v-else
              v-model="row.flmc"
              placeholder=""
              @change="setNameSuccess(row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="qyzt" align="center">
          <template slot-scope="{ row, $index }" slot="header">
            <div>禁用/启用</div>
          </template>
          <template slot-scope="{ row, $index }">
            <el-switch
              v-model="row.qyzt"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
              @change="switchChange(row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="sc" label="删除" align="center">
          <template slot-scope="{ row, $index }">
            <!-- <el-button type="danger" @click="delOk(row.id)" size="mini">删除</el-button> -->
            <button
              @click="delOk(row.id)"
              style="
                width: 54px;
                height: 27px;
                background: #ffefef;
                border: 1px solid #ff3819;
                border-radius: 4px;
                font-size: 14px;
                color: #ff3819;
              "
            >
              删除
            </button>
          </template>
        </el-table-column>
        <el-table-column prop="cmm" label="重命名" width="292" align="center">
          <template slot-scope="{ row, $index }">
            <!-- <el-button type="warning" @click="resetName(row)" size="mini">重命名</el-button> -->
            <button
              @click="resetName(row)"
              style="
                width: 54px;
                height: 27px;
                background: #fff6ef;
                border: 1px solid #f3b815;
                border-radius: 4px;
                font-size: 14px;
                color: #f3b815;
              "
            >
              重命名
            </button>
          </template>
        </el-table-column>
        <el-table-column prop="tjxjfl" label="添加下级分类" align="center">
          <template slot-scope="{ row, $index }">
            <!-- <el-button type="primary" @click="addOneRow(row, $index)" v-show="row.typeleve != 3" size="mini">新增</el-button> -->
            <button
              v-show="row.typeleve != 4"
              @click="addOneRow(row, $index)"
              style="
                width: 54px;
                height: 27px;
                background: #f1f8fe;
                border: 1px solid #51aef6;
                border-radius: 4px;
                font-size: 14px;
                color: #51aef6;
              "
            >
              新增
            </button>
          </template>
        </el-table-column>
        <el-table-column
            prop="tzxjflsx"
            label="调整分类顺序"
            align="center"
          >
            <template slot-scope="{ row, $index }">
              <!-- <el-button type="success" @click="sortItem(row.fid, row.typeleve)" size="mini">排序</el-button> -->
              <button
                style="
                  width: 54px;
                  height: 27px;
                  background: #f1fff8;
                  border: 1px solid #02c86c;
                  border-radius: 4px;
                  font-size: 14px;
                  color: #02c86c;
                "
                @click="sortItem(row.fid, row.typeleve)"
              >
                排序
              </button>
            </template>
          </el-table-column>
      </el-table>
    </div>
    <!-- <div class="bottom-block">
      <div class="export-button">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <span>导出Excel</span>
      </div>
    </div> -->
    <div class="button-group">
      <div @click="changeState">
        <div>保 存</div>
      </div>
      <div @click="cancel">
        <div>取 消</div>
      </div>
      <!-- <el-button type="success" @click="changeState">保 存</el-button>
      <el-button type="danger" @click="cancel" style="margin-left:60px">取 消</el-button> -->
    </div>
    <el-dialog
      title="专业必修课排序"
      :visible.sync="showManualEntryDialog"
      width="50%"
      class="ts"
    >
      <div>
        <transfer
          :leftData="leftData"
          :rightData="rightData"
          @transfer="handleTransfer"
          @handleSort="handleSort"
        >
        </transfer>
      </div>
      <div class="button-group">
        <div @click="saveSort">
          <div>保 存</div>
        </div>
        <div @click="showManualEntryDialog = false">
          <div>取 消</div>
        </div>
        <!-- <el-button type="success" @click="saveSort">保 存</el-button>
        <el-button type="danger" @click="showManualEntryDialog = false" style="margin-left:60px">取 消</el-button> -->
      </div>
    </el-dialog>
    <el-dialog
      title="添加下级课程分类名称"
      :visible.sync="newDataDialog"
      width="50%"
      class="ts"
    >
      <el-input v-model="newFlmc"></el-input>
      <div class="button-group">
        <div @click="saveNewFlmc">
          <div>保 存</div>
        </div>
        <div @click="newDataDialog = false">
          <div>取 消</div>
        </div>
        <!-- <el-button type="success" @click="saveNewFlmc">保 存</el-button>
        <el-button type="danger" @click="newDataDialog = false" style="margin-left:60px">取 消</el-button> -->
      </div>
    </el-dialog>
    <el-dialog
      title="新增课程分类名称"
      :visible.sync="addFirstTypeDialog"
      width="50%"
      class="ts"
    >
      <el-input v-model="addTopFlmc"></el-input>
      <div class="button-group">
        <div @click="addFirstTypeSub">
          <div>保 存</div>
        </div>
        <div @click="addFirstTypeDialog = false">
          <div>取 消</div>
        </div>
        <!-- <el-button type="success" @click="addFirstTypeSub">保 存</el-button>
        <el-button type="danger" @click="addFirstTypeDialog = false" style="margin-left:60px">取 消</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { querycoursetypebyid,queryFirstcoursetype } from "@/api/propositionReview/approval";
import {
  reqCheckAllCourse,
  reqDeleteNewRow,
  reqSaveNewName,
  reqAddNewRow,
  reqSortRow,
  reqSortRowp,
  stateupdate
} from "@/api/course/courses.js";
import Transfer from "../../../components/transfer/Transfer.vue";
export default {
  name: "index",
  components: {
    Transfer
  },
  data() {
    return {
      idArr: [],
      flmc: "",
      qyzt: "",
      xh:"",
      children: "",
      haschildren: "",
      showManualEntryDialog: false,
      newDataDialog: false,
      addTopFlmc:"",
      addFirstTypeDialog: false,
      newFlmc: "",
      newFid: "",
      newTypelevel: "",
      rightData: [],
      tableData: [],
      topTypeData:[]
    };
  },
  // mounted() {
  //       this.querycoursetypebyid();
  // },
  created() {
    this.topTypeMe();
    this.getInitInfo();
  },
  methods: {
    //获取最顶级分类数据
    async topTypeMe(){
      const result = await queryFirstcoursetype();
      if (result.data.code == 200) {
        this.topTypeData = result.data.data;
        this.xh = this.topTypeData.length + 1;
      }
    },
    // 初始化表格数据
    async getInitInfo() {
      let typelevel = 1;
      const result = await reqCheckAllCourse(typelevel);
      if (result.data.code == 200) {
        this.tableData = result.data.data;
      }
    },
    //新增最顶级分类
    addFirstType(){
      this.addFirstTypeDialog = true;
    },
    //新增最顶级分类点击保存
    async addFirstTypeSub(){
      let obj = {
        xh:this.xh,
        flmc: this.addTopFlmc,
        fid: "0",
        qyzt:"1",
        typeleve: "0",
        typedata:"1"
      };
      const result = await reqAddNewRow(obj);
      if (result.data.code == 200 && result.data.msg == "操作成功") {
        this.addFirstTypeDialog = false;
        this.getInitInfo();
        this.$message({ type: "success", message: "保存成功!" });
      } else {
        this.$message({ type: "error", message: data.data });
      }
    },
    getIdArr(row) {
      return row.id;
    },
    // 点击重命名
    resetName(row) {
      this.$set(row, "setName", true);
    },
    // 重命名失去焦点保存
    async setNameSuccess(row) {
      row.setName = false;
      row.typedata = "1";
      delete row.setName;
      const result = await reqSaveNewName(row);
      if (result.data.code == 200) {
        this.getInitInfo();
      }
    },
    // 点击新增
    addOneRow(row, index) {
      this.newDataDialog = true;
      this.newFid = row.id;
      this.newTypelevel = +row.typeleve + 1;
      //   this.$refs.courseTableList.toggleRowExpansion(row, true);
      //   this.tableData.splice(index, 0, obj);
    },
    // 新增弹窗的保存事件
    async saveNewFlmc() {
      let obj = {
        flmc: this.newFlmc,
        fid: this.newFid,
        typeleve: this.newTypelevel,
        qyzt:"1",
        typedata:"1"
      };
      const result = await reqAddNewRow(obj);
      if (result.data.code == 200) {
        this.newDataDialog = false;
        this.$message({ type: "success", message: "保存成功!" });
        this.getInitInfo();
        this.newFlmc = "";
        this.newFid = "";
        this.newTypelevel = "";
      } else {
        this.$message({ type: "error", message: data.data });
      }
    },
    //排序弹窗
    handleTransfer(type, data, callback) {
      if (type == "left") {
        this.rightData = this.rightData.concat(this.leftData[data]);
      } else {
        this.leftData = this.leftData.concat(this.rightData[data]);
      }
      this[type + "Data"].splice(data, 1);
      callback(type);
    },
    handleSort(type, sortType, data, callback) {
      if (!sortType || sortType == "right") {
        if (type == "up") {
          this.rightData = this.swapItems(this.rightData, data[1], data[1] - 1);
          callback(sortType, [data[0], data[1] - 1]);
        } else {
          this.rightData = this.swapItems(this.rightData, data[1], data[1] + 1);
          callback(sortType, [data[0], data[1] + 1]);
        }
      } else if (sortType == "left") {
        if (type == "up") {
          this.leftData = this.swapItems(this.leftData, data[0], data[0] - 1);
          callback(sortType, [data[0] - 1, data[1]]);
        } else {
          this.leftData = this.swapItems(this.leftData, data[0], data[0] + 1);
          callback(sortType, [data[0] + 1, data[1]]);
        }
      } else if (sortType == "both") {
        if (type == "up") {
          data[0] == 0
            ? ""
            : (this.leftData = this.swapItems(
                this.leftData,
                data[0],
                data[0] - 1
              ));
          data[1] == 0
            ? ""
            : (this.rightData = this.swapItems(
                this.rightData,
                data[1],
                data[1] - 1
              ));
          callback(sortType, [
            data[0] == 0 ? data[0] : data[0] - 1,
            data[1] == 0 ? data[1] : data[1] - 1
          ]);
        } else {
          data[0] == this.leftData.length - 1
            ? ""
            : (this.leftData = this.swapItems(
                this.leftData,
                data[0],
                data[0] + 1
              ));
          data[1] == this.rightData.length - 1
            ? ""
            : (this.rightData = this.swapItems(
                this.rightData,
                data[1],
                data[1] + 1
              ));
          callback(sortType, [
            data[0] == this.leftData.length - 1 ? data[0] : data[0] + 1,
            data[1] == this.rightData.length - 1 ? data[1] : data[1] + 1
          ]);
        }
      }
    },
    swapItems(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    },
    //排序弹层点击保存
    async saveSort() {
      console.log(this.rightData);
      const result = await reqSortRowp(this.rightData);
      if (result.data.code == 200) {
        this.showManualEntryDialog = false;
      }
      this.getInitInfo();
    },
    querycoursetypebyid() {
      let id = 1;
      return new Promise(() => {
        querycoursetypebyid(id).then(res => {
          this.tableData = res.data.data;
          this.id = this.tableData.id;
        });
      });
    },
    // traverseArr(obj){
    //    if(obj){
    //      this.childCategory.push(obj.id)
    //      if(obj.children){
    //        obj.children.forEach(element => {
    //            this.traverseArr(element)
    //        });
    //      }
    //    }
    // },
    // dianji 删除按钮
    async deleteItem(id) {
      const result = await reqDeleteNewRow(id);
      const data = result.data,isNull = JSON.stringify(data.data) === '{}';
      if (data.code == 200 && isNull)  {
        this.$message({ type: "success", message: "删除成功" });
        this.getInitInfo();
      } else {
        this.$message({ type: "error", message: data.data });
      }
    },
    delOk(id){
      this.$confirm('确认要删除吗？')
        .then(_ => {
          this.deleteItem(id);
        })
    },
    // 点击排序
    async sortItem(fid, typeleve) {
      console.log(fid)
      console.log(typeleve)
      this.showManualEntryDialog = true;
      let params = 
      {
        "fid":fid,
        "typeleve":typeleve,
        "typedata":"1"
      }
      const result = await reqSortRow(params);
      if (result.data.code == 200) {
        this.rightData = result.data.data;
        this.rightData.forEach(item => {
          item.name = item.flmc;
        });
      }
    },

    switchChange(row){
      let id = row.id,qyzt = row.qyzt,typedata = 1;
      stateupdate(id,qyzt,typedata).then(res=>{
        if(res.data.code == 200){
          this.getInitInfo();
        } else {
          this.$message({ type: "error", message: res.data.msg });
        }
      })
    },

    changeState() {
      console.log(this.$route.query.index, "xz");
      if (this.$route.query.index == "xz") {
        this.$router.push({
          path: "/admin/course/addCourse" //要跳转的页面的路由
        });
      } else {
        this.$router.push({
          path: "/admin/course/addCoursesr" //要跳转的页面的路由
        });
      }
    },
    cancel() {
      console.log(this.$route.query.index, "qx");
      if (this.$route.query.index == "xz") {
        this.$router.push({
          path: "/admin/course/addCourse" //要跳转的页面的路由
        });
      } else {
        this.$router.push({
          path: "/admin/course/addCoursesr" //要跳转的页面的路由
        });
      }
    },
    px() {}
  }
};
</script>
<style lang="less" scoped>
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  margin: 15px 0;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
.assessment-container {
  .el-dialog {
    height: auto;
    .el-scrollbar {
      width: 100%;
      height: auto;
      border: 1px solid #004ca7;
      border-radius: 4px;
      .el-radio {
        margin-top: 5px;
      }
    }
  }
  .export-report-container {
    .el-dialog__body {
      padding: 64px 0 64px 50px;

      .el-radio {
        margin-right: 79px;
      }
    }

    .el-dialog__footer {
      padding-bottom: 103px;
    }
  }

  .import-report-container {
    .el-dialog__body {
      padding-left: 165px;
      padding-top: 71px;
      padding-bottom: 60px;

      > div {
        > span {
          font-size: 18px;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          vertical-align: middle;
        }

        > input {
          width: 254px;
          height: 25px;
          border: 1px solid #004ca7;
          opacity: 1;
          border-radius: 4px;
          padding-left: 5px;
          margin-right: 8px;
          color: #004ca7;
          vertical-align: middle;
        }

        > div {
          display: inline-block;
          font-size: 18px;
          padding: 1px 10px;
          border-radius: 4px;
          vertical-align: middle;
          cursor: pointer;

          &:nth-child(3) {
            color: rgba(2, 200, 108, 1);
            background: #f1fff8;
            border: 1px solid #02c86c;
            position: relative;
            margin-right: 20px;

            > input {
              width: 0px;
              position: absolute;
              left: 0;
              opacity: 1;
              cursor: pointer;
            }
          }

          &:nth-child(4) {
            color: rgba(82, 48, 233, 1);
            background: rgba(235, 230, 255, 1);
            border: 1px solid rgba(82, 48, 233, 1);
          }
        }
      }
    }

    .el-dialog__footer {
      padding-bottom: 76px;

      .green {
        padding: 1px 17px;
      }
    }
  }

  .manual-entry-container {
    .el-dialog__body {
      > div {
        width: 1014px;
        border: 1px solid rgba(0, 76, 167, 0.8);
        border-radius: 6px;
        margin: 0 auto;

        > div {
          border-bottom: 1px solid rgba(0, 76, 167, 0.39);

          &:last-child {
            border-bottom: none;
          }

          > div {
            display: flex;

            > div {
              height: 96px;
              display: flex;
              align-items: center;
              justify-content: center;

              &:nth-child(1) {
                width: 420px;
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                color: #004ca7;
                background: rgba(77, 129, 192, 0.1);
              }

              &:nth-child(2) {
                padding-left: 19px;
              }
            }
          }
        }
      }
    }

    .el-dialog__footer {
      padding-bottom: 43px;
    }

    .dialog-footer {
      > button {
        width: 87px;
        height: 36px;
        background: #fff6ef;
        border: 1px solid #f3b815;
        border-radius: 6px;
        background: rgba(255, 246, 239, 1);
        font-size: 18px;
        color: #f3b815;
      }
    }
  }

  .manual-entry-containerass {
    .el-dialog__body {
      > div {
        width: 1014px;
        border: 1px solid rgba(0, 76, 167, 0.8);
        border-radius: 6px;
        margin: 0 auto;

        > div {
          border-bottom: 1px solid rgba(0, 76, 167, 0.39);

          &:last-child {
            border-bottom: none;
          }

          > div {
            display: flex;

            > div {
              width: 900px;
              height: 96px;
              display: flex;
              align-items: center;
              justify-content: center;

              &:nth-child(1) {
                width: 420px;
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                color: #004ca7;
                background: rgba(77, 129, 192, 0.1);
              }

              &:nth-child(2) {
                padding-left: 19px;
              }
            }
          }
        }
      }
    }

    .el-dialog__footer {
      padding-bottom: 43px;
    }

    .dialog-footer {
      > button {
        width: 87px;
        height: 36px;
        background: #fff6ef;
        border: 1px solid #f3b815;
        border-radius: 6px;
        background: rgba(255, 246, 239, 1);
        font-size: 18px;
        color: #f3b815;
      }
    }
  }
}

.plan-entry-table-container {
  margin: 0;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .el-checkbox__inner:hover {
    border-color: #004ca7;
  }

  .el-checkbox__inner {
    border: 1px solid #004ca7;
    border-radius: 0;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #004ca7;
    border-color: #004ca7;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #004ca7;
  }

  .el-checkbox.is-bordered.is-checked {
    border-color: #004ca7;
  }

  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #004ca7;
  }

  .export-button {
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;

    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }

    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }

  .lucj-import-button {
    .export-button;
    width: 116px;
    margin: 0 auto 12px;
    background: #f1fff8;
    border: 1px solid #02c86c;

    &:last-child {
      margin-bottom: 0px;
    }

    > span {
      color: #02c86c;
    }
  }

  .lucj-expot-button {
    .export-button;
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: 81px;
    margin: 0 auto 12px;

    &:last-child {
      margin-bottom: 0px;
    }

    > span {
      color: #f3b815;
    }
  }
}
.ts .el-scrollbar__view {
  height: auto;
}
.cjrc-button {
  width: 180px;
  height: 28px;
  line-height: 28px;
  background: #fff6ef;
  border: 1px solid #f86900;
  border-radius: 6px;
  color: #f86900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  img {
    width: 14px;
    height: 14px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/print-entry.less";

/deep/.packaged_transfer .right_panel .content-box{
  padding: 0 15px 15px 15px;
}
/deep/.el-scrollbar__wrap{
  margin: 0;
}
.plan-entry-table-container {
  .table-data {
    width: 95%;
    margin: 0 auto;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}
.button-group {
  cursor: pointer;
  margin: 30px 0 ; 
  text-align: center;

  > div {
    display: inline-block;
    font-size: 18px;
    padding: 6px 22px;
    border-radius: 6px;

    &:nth-child(1) {
      color: #f3b815;
      border: 1px solid #f3b815;
      background: #fff6ef;
      margin-right: 139px;
    }

    &:nth-child(2) {
      color: #ff3819;
      border: 1px solid #ff3819;
      background: #ffefef;
    }
  }
}
</style>
